<template>
  <view class="content bg-white min-h-full">
    <view>
      <view class="fontchange">
        <text :style="{ 'font-size': fontValue + 'px' }">显示文字大小</text>
        <text class="text-blue-300 ml-20rpx" :style="{ 'font-size': fontValue + 'px' }">{{ fontValue }}</text>
      </view>
    </view>
    <view style="width: 100%; padding: 0 20rpx">
      <slider :min="10" :max="30" :value="fontValue" @change="sliderChange" :step="1" activeColor="#007AFF" />
      <view class="change-fontsize-box">
        <text style="font-size: 10px"> 小 </text>
        <text style="font-size: 16px"> 标准 </text>
        <text style="font-size: 22px"> 中 </text>
        <text style="font-size: 28px"> 大 </text>
      </view>
    </view>
    <view style="padding: 40rpx 30rpx; width: 100%">
      <button class="font-button" @click="submit">确 定</button>
    </view>

    <view style="max-height: 60vh; overflow: scroll" v-if="isDebug">
      <u-line margin="0.5em 0" />
      <u-text text="文字测试"  align="center" bold size="35rpx"></u-text>
      <u-text text="dev模式才会显示" type="info" align="center" size="25rpx"></u-text>
      <view class="my-20rpx"></view>
      <u-alert
        type="warning"
        title="说明"
        description="测试各种写法下的字体显示情况，拖动滑块可改变字体大小 \n 1.rem 动态为正确；\n 2. rpx/px/vw 在没有使用postcss转换成rem之前，无法‘动态’；\n3.下面的‘测试文字’默认会设为很小很小，滑东字体大小后，能产生变化为正常，否则为不受控制"
      >
      </u-alert>
      <u-cell-group :border="false">
        <u-cell title="uview 组件" title-style="font-weight:bold"> </u-cell>
        <view class="test-text">
          <text class="desc-text"
            >u-text 文字（未设置props:size；该情况下，根据uni.$u.config.unit配置的单位（默认px））</text
          >
          <u-text text="测试文字"></u-text>
        </view>
        <view class="test-text">
          <text class="desc-text">u-text 文字 设置size='16px' (指定单位的字符串px)</text>
          <u-text text="测试文字" size="16px"></u-text>
        </view>
        <view class="test-text">
          <text class="desc-text">u-text 文字 设置size='1rem' (指定单位的字符串rem)</text>
          <u-text text="测试文字" size="1rem"></u-text>
        </view>
        <view class="test-text">
          <text class="desc-text">u-text 文字 设置size='64rpx' (指定单位的字符串rpx)</text>
          <u-text text="测试文字" size="10rpx"></u-text>
        </view>
        <u-line margin="0.5em 0" />
        <view class="test-text">
          <text class="desc-text">u-input 文字（未设置props:size）</text>
          <u-input value="测试文字" placeholder="请输入内容" border="none" clearable />
        </view>

        <u-line margin="0.5em 0" />
        <u-cell title="手写/原生 组件" title-style="font-weight:bold"> </u-cell>
        <view class="flex-col">
          <view class="test-text">
            <text class="desc-text">text 文字（未设置 style font-size）</text>
            <view>
              <text>测试文字</text>
            </view>
          </view>
          <view class="test-text">
            <text class="desc-text">text 文字（设置style font-size = 12px）</text>
            <view>
              <text style="font-size: 12px">测试文字</text>
            </view>
          </view>
          <view class="test-text">
            <text class="desc-text">text 文字（设置style font-size = 1rem）</text>
            <view>
              <text style="font-size: 1rem">测试文字</text>
            </view>
          </view>
          <view class="test-text">
            <text class="desc-text">text 文字（设置style font-size = 24rpx）</text>
            <view>
              <text style="font-size: 24rpx">测试文字</text>
            </view>
          </view>
          <view class="test-text">
            <text class="desc-text">text 文字（设置style tailwindcss : text-sm）</text>
            <view>
              <text class="text-sm">测试文字</text>
            </view>
          </view>
        </view>
      </u-cell-group>
    </view>
  </view>
</template>

<script>
export default {
  computed: {},
  data() {
    return {
      fontValue: 16,
      isDebug: process.env.NODE_ENV === "development",
    };
  },
  onShow() {
    this.fontValue = this.$store.getters.globalFontSize || 16;
  },
  mounted() {
  },
  methods: {
    sliderChange(e) {
      this.fontValue = e.detail.value;
      // #ifdef H5
      // 获取 <html> 元素
      // const htmlElement = document.documentElement;

      // 修改 style 属性
      // htmlElement.style.fontSize = e.detail.value + "px";
      // #endif
    },
    submit() {
      this.$store.commit("theme/setGlobalFontSize", this.fontValue);

      /*** 重启 */
      // #ifdef MP-WEIXIN
      wx.restartMiniProgram({
        path: import.meta.env.VITE_PAGE_LOGIN,
      });
      // #endif

      // #ifdef H5
      location.reload(); //  reload 则不需要下面的代码，已再main.js中配置
      // #endif

      // #ifdef APP
      plus.runtime.restart();
      // #endif
    },
  },
};
</script>

<style>
.font-button {
  font-size: 30rpx;
  line-height: 88rpx;
  padding: 0;
  border-radius: 6rpx;
  background-color: var(--kui-color-theme);
  color: #fff;
}

.fontchange {
  /* font-size: 32rpx; */
  margin: 40rpx 0;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 30rpx;
  box-sizing: border-box;
}

.change-fontsize-box {
  margin: 20rpx 36rpx;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.test-text {
  background: #f7f7f7;
  padding: 10px;
  margin-bottom: 10px;
  max-height: 80px;
  height: 80px;

  .desc-text {
    font-size: 12px;
    color: #acacac;
    line-height: 15px;
  }
}
</style>
